<template>
	<div id="center">
		<!--图表-->
		<Modal v-model="chartShow" width="90%">
	        <div style="height:70vh;margin-top:20px;" ref="chart"></div>	        
	        <div slot="footer"></div>
	    </Modal>
		<div class="queryPanel">
			<ul>
				<li>
					<span>开始时间：</span>
					<DatePicker v-model="Request.date" @on-change="startDateChange" type="date" placeholder="Select date"></DatePicker>
				</li>
				<li>
					<span>航班：</span>
					<Select v-model="Request.airlineCode" @on-change="airlineCodeChange" style="width:90px;">
						<Option v-for="item in flightNoList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</li>
				<li>
					<span>起点：</span>
					<Input v-model="Request.from"/>					
				</li>
				<li>
					<span>终点：</span>
					<Input v-model="Request.to"/>					
				</li>
				<li>
					<span>舱位：</span>
					<Select v-model="Request.cabinCode" style="width:90px;">
						<Option v-for="item in cabinCodeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</li>
				<li>
					<Button @click="search" class="search">查询</Button>
				</li>
			</ul>
			<div>
				<Button @click="chart" class="adjust">模拟</Button>
				<Button @click="adjust" class="adjust">人工调整</Button>				
				<Button @click="apply" class="apply">应用</Button>
			</div>
		</div>
		<div class="tableWarp" v-if="show">
			<div class="table1">
				<p class="title">优化时间：12-12-12  &nbsp;&nbsp;&nbsp;上次应用时间：待定。。。</p>
				<table>
					<tr>
						<th rowspan="2">舱位</th>
						<th rowspan="2">可用座位数</th>
						<th rowspan="2">升舱</th>
						<th colspan="2">已售</th>
						<th colspan="3">预测</th>
						<th rowspan="2">超售</th>
						<th rowspan="2">允售额</th>
					</tr>
					<tr>						
						<th>总额</th>
						<th>团队</th>
						<th>需求</th>
						<th>登机</th>
						<th>上座率</th>
					</tr>
					<tr v-for="cabinCode in cabinCodeResult">
						<td>{{cabinCode.cabinCode}}</td>
						<td>{{cabinCode.seat}}</td>
						<td>待定</td>
						<td>{{cabinCode.soldTotal}}</td>
						<td>{{cabinCode.soldGroup}}</td>
						<td>{{cabinCode.forecastDemand}}</td>
						<td>{{cabinCode.forecastCheckinNum}}</td>
						<td>{{cabinCode.attendanceRate}}</td>
						<td>待定</td>
						<td>{{cabinCode.allowance}}</td>
					</tr>
					
				</table>
			</div>
			<div class="table2">
				<table>
					<tr>
						<th rowspan="2">舱级</th>
						<th rowspan="2">舱级价格</th>
						<th colspan="2">已售</th>
						<th colspan="2">预测</th>
						<th rowspan="2">预留</th>
						<th rowspan="2">停售</th>
						<th rowspan="2">允售额</th>
					</tr>
					<tr>						
						<th>总额</th>
						<th>团队</th>
						<th>需求</th>
						<th>登机</th>
					</tr>
					<tbody v-for="cabinRank in cabinRankResult">
						<tr v-for="cabin in cabinRank" :class='{"mainCabin":isMainCabin(cabin.cabinCode),"commonCabin":!isMainCabin(cabin.cabinCode)}'>
							<td>{{cabin.cabinCode}}</td>
							<td>{{cabin.classPrice}}</td>
							<td>{{cabin.soldTotal}}</td>
							<td>{{cabin.soldGroup}}</td>
							<td>{{cabin.forecastDemand}}</td>
							<td class="allowSell">
								<input v-if="isEdit" type="text"/>
								<span v-else>{{cabin.forecastCheckinNum}}</span>							
							</td>
							<td>{{cabin.reserved}}</td>
							<td>待定</td>
							<td>{{cabin.allowance}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>	
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import "./style.scss";
</style>